<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title>FixedSplitter Test</title>

	<link href="../themes/iphone/FixedSplitter.css" rel="stylesheet"/>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/connect",
			"dojo/dom",
			"dojo/dom-class",
			"dojo/ready",
			"dijit/registry",
			"dojox/mobile/parser",
			"dojox/mobile/FixedSplitter",
			"dojox/mobile/Pane"
		], function(connect, dom, domClass, ready, registry){
			change = function(e) {
				var splitter = registry.byId(e.target.id == "btn1" ? "splitter1" : "splitter2");
				splitter.set("orientation", splitter.orientation === "H" ? "V" : "H");
			};
			ready(function(){
				connect.connect(dom.byId("btn1"), "onclick", "change");
				connect.connect(dom.byId("btn2"), "onclick", "change");
			});
		});
	</script>

	<style type="text/css">
		html, body{
			width: 100%;
			height: 100%;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
		}

		.mblFixedSplitterH > #pane1, .mblFixedSplitterH > #pane2 {
			width:20%;
		}
		.mblFixedSplitterV > #pane1, .mblFixedSplitterV > #pane2 {
			height:20%;
		}
	</style>
</head>
<body>
	<div id="splitter1" data-dojo-type="dojox.mobile.FixedSplitter" style="width:100%;height:100%;" data-dojo-props='orientation:"V"'>
		<div id="pane1" data-dojo-type="dojox.mobile.Pane" style="background-color:yellow;">
			pane #1
	 		<input type="button" id="btn1" value="H <-> V">
		</div>

		<div id="splitter2" data-dojo-type="dojox.mobile.FixedSplitter" style="width:100%;height:100%;" data-dojo-props='orientation:"H"'>
			<div id="pane2" data-dojo-type="dojox.mobile.Pane" style="background-color:pink;">
				pane #2
	 			<input type="button" id="btn2" value="H <-> V">
			</div>
			<div id="pane3" data-dojo-type="dojox.mobile.Pane" style="background-color:cyan;">
				pane #3
			</div>
		</div>
	</div>
</body>
</html>
